<template>
    <div class="setBox">
        <div class="setItem">
            <div class="item">
                <div class="title"> 彩色弹幕：</div>
                <div @click="changeVideoSet('color')" class="select">
                    <Select v-show="colorfulBarrage"></Select>
                    <SelectNo v-show="!colorfulBarrage"></SelectNo>
                </div>
            </div>
            <div class="item">
                <div class="title"> 视频多开：</div>
                <div @click="changeVideoSet('more')" class="select">
                    <Select v-show="openMoreVideos"></Select>
                    <SelectNo v-show="!openMoreVideos"></SelectNo>
                </div>
            </div>
            <div class="item">
                <div class="title"> 记忆播放：</div>
                <div @click="changeVideoSet('memory')" class="select">
                    <Select v-show="memoryPlayback"></Select>
                    <SelectNo v-show="!memoryPlayback"></SelectNo>
                </div>
            </div>
            <div class="item">
                <div class="title"> 自动播放：</div>
                <div @click="changeVideoSet('auto')" class="select">
                    <Select v-show="autoPlay"></Select>
                    <SelectNo v-show="!autoPlay"></SelectNo>
                </div>
            </div>
            <div class="item">
                <div class="title">自动连播：</div>
                <div @click="changeVideoSet('next')" class="select">
                    <Select v-show="autoNext"></Select>
                    <SelectNo v-show="!autoNext"></SelectNo>
                </div>
            </div>
        </div>
        <div class="myFolders">
            <div class="btns">
                <button @click="selectAll" class="btn">全选</button>
                <button @click="reverseSelect" class="btn">反选</button>
                <button class="btn" @click="AddFolder">新增</button>
                <button class="btn" @click="DeleteSelect">删除</button>
            </div>
            <ul class="folders">
                <li v-for="item in videoFolders" :key="item.path" class="list">
                    <input type="checkbox" class="folder" v-model="item.checked" />
                    <div class="name">
                        <div class="nameText">{{ item.name }}</div>
                    </div>
                    <div class="path"> {{ item.path }}</div>
                    <button class="btn1" @click="Rename(item)">重命名</button>
                    <button class="btn2" @click="Delete(item)">删除</button>
                </li>
            </ul>
            <div class="empty" v-if="videoFolders.length === 0">
                <EmptyVideo :size="70"></EmptyVideo>
            </div>
        </div>
        <div class="notice">
            本地弹幕只支持 xml 格式，请确保弹幕文件格式正确。可自行扩展 ass 格式。
            弹幕盒子：https://danmubox.github.io/（需魔法访问）
            DFUtil：https://delflare505.win/?target=searchAnimad
        </div>
        <div class="model" v-if="model">
            <div class="modelBox">
                <div class="title">重命名</div>
                <div class="inputBox">
                    <input type="text" class="input" v-model="renameName.name" />
                </div>
                <div class="btns">
                    <button @click="cancel" class="btn">取消</button>
                    <button @click="confirm" class="btn">确定</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { settingStore } from '@renderer/store/setStore'
import { playersetStore } from '@renderer/store/playerSet'
import { storeToRefs } from 'pinia'
import Select from '@renderer/components/icons/select.vue'
import SelectNo from '@renderer/components/icons/selectNo.vue'
import EmptyVideo from '@renderer/components/icons/emptyVideo.vue'
import { ref } from 'vue'
const { ipcRenderer } = require('electron')
const setStoreData = settingStore()
const playerSetData = playersetStore()
const renameName = ref({}) as any
let oName = ''
const model = ref(false)
const { videoFolders, } = storeToRefs(setStoreData)
const { openMoreVideos, colorfulBarrage, memoryPlayback, autoPlay, autoNext } = storeToRefs(playerSetData)
const changeVideoSet = (item: string) => {
    switch (item) {
        case 'color':
            colorfulBarrage.value = !colorfulBarrage.value
            break
        case 'more':
            openMoreVideos.value = !openMoreVideos.value
            break
        case 'memory':
            memoryPlayback.value = !memoryPlayback.value
            break
        case 'auto':
            autoPlay.value = !autoPlay.value
            break
        case 'next':
            autoNext.value = !autoNext.value
            break
    }
    ipcRenderer.send('update-storage', JSON.stringify(playerSetData.$state), 'playerSet')
}


const AddFolder = async () => {
    const res = await ipcRenderer.invoke('select-local-file-path')
    // 根据路径生成唯一 id 
    const obj = {
        name: res.filePaths[0].split('\\').at(-1),
        path: res.filePaths[0],
        checked: false
    }
    // 判断是否已经存在
    if (videoFolders.value.some(el => el.path === res.filePaths[0])) return
    videoFolders.value.push(obj)
    ipcRenderer.send('update-storage', JSON.stringify(setStoreData.$state), 'setStoreData')
}

// 反选函数
const reverseSelect = () => {
    videoFolders.value.forEach(el => {
        el.checked = !el.checked
    })
}
// 全选函数
const selectAll = () => {
    videoFolders.value.forEach(el => {
        el.checked = true
    })
}

const Delete = (item) => {
    videoFolders.value = videoFolders.value.filter(el => el.path !== item.path)
    ipcRenderer.send('update-storage', JSON.stringify(setStoreData.$state), 'setStoreData')
}
const DeleteSelect = () => {
    videoFolders.value.forEach((el) => {
        if (el.checked) {
            Delete(el)
        }
    })
}

const Rename = (item) => {
    model.value = true
    renameName.value = item
    oName = item.name
}
const cancel = () => {
    renameName.value.name = oName
    model.value = false
}
const confirm = () => {
    model.value = false
    if (!renameName.value.name) {
        renameName.value.name = oName
    } else {
        ipcRenderer.send('update-storage', JSON.stringify(setStoreData.$state), 'setStoreData')
    }
}
</script>

<style scoped lang="scss">
.setBox {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    padding: 5px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;


    .setItem {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        padding: 5px;
        gap: 10px;
        align-items: center;
        margin: 5px 0;
        border: 1px solid #8d8d8d35;

        .item {
            padding: 0px 10px;
            display: flex;
            gap: 10px;
            align-items: center;
            justify-content: space-between;
            @include mixin.box_shadow();

            .title {
                padding: 5px;
            }

            .select {
                width: 23px;
                height: 23px;
                cursor: pointer;
                user-select: none;
                box-sizing: border-box;
                border-radius: 50%;
                overflow: hidden;
                display: flex;
                justify-content: center;
                align-items: center;
                @include mixin.box_shadow();
            }
        }
    }

    .myFolders {
        margin: 5px 0;
        border: 1px solid #8d8d8d35;
        flex: 1;
        position: relative;
        @include mixin.scroll_bar();

        .btns {
            display: flex;
            gap: 10px;
            padding: 10px 5px;
            border-bottom: 1px solid #8d8d8d35;
            position: sticky;
            top: 0;
            background-color: var(--back);
            color: var(--text);

            .btn {
                &:nth-child(1) {
                    background-color: #0060fa;
                }

                &:nth-child(2) {
                    background-color: #5f00ee;
                }

                &:nth-child(3) {
                    background-color: #00d720;
                }

                &:nth-child(4) {
                    background-color: red;
                }
            }
        }

        .folders {
            display: grid;
            gap: 10px;

            .list {
                @include mixin.box_shadow();
                display: grid;
                grid-template-columns: 30px 1fr 2fr 80px 60px;
                align-items: center;
                padding: 5px;
                border-radius: 5px;
                gap: 10px;

                .folder {
                    width: 15px;
                    height: 15px;
                    cursor: pointer;
                }

                .name {
                    .nameText {
                        height: 25px;
                        line-height: 25px;
                        box-sizing: border-box;
                    }
                }

                .btn1 {
                    background-color: #0069d2;
                }

                .btn2 {
                    background-color: red;
                }
            }
        }

        .empty {
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    }

    .notice {
        border: 1px solid #8d8d8d35;
        padding: 5px;
        font-size: 14px;
        text-indent: 2em;
    }
}

.model {
    width: 100vw;
    height: 100vh;
    position: fixed;
    background-color: #80808055;
    top: 0;
    left: 0;

    .modelBox {
        width: 300px;
        position: fixed;
        z-index: 100;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: var(--text);
        background-color: var(--back);
        border-radius: 5px;
        padding: 10px;
        box-sizing: border-box;
        @include mixin.box_shadow();

        .title {
            font-size: 18px;
            font-weight: bold;
            text-align: center;
            margin: 10px 0;
        }

        .inputBox {
            margin: 10px 0;

            input {
                border-radius: 5px;
                width: 100%;
                border: none;
                outline: none;
                text-align: center;
                border-bottom: 2px solid #0069d2;
                padding: 5px;
                box-sizing: border-box;
                color: var(--text);
                background-color: var(--back);
            }
        }

        .btns {
            margin-top: 10px;
            display: flex;
            justify-content: right;
            align-items: center;

            .btn {
                padding: 3px 10px;
                border-radius: 5px;
                cursor: pointer;
                margin: 0 5px;


                &:nth-child(1) {
                    background-color: red;
                }

                &:nth-child(2) {
                    background-color: #0060fa;
                }
            }
        }
    }
}
</style>